<template>
	<view>
		<view class="treehead">
			<!-- tab栏 -->
			<view class="tree_tab">
				<scroll-view scroll-x="true" :scroll-left="scrollLeft">
					<view class="tab_scroll">
						<view @tap="toChoice()" class="tree_search">
							<image class="sear_img" :src="photo_cdn1+'zpupload/static/zuzhi/sousuo.png'" mode="widthFix"></image>
							<view class="sear_text">搜索</view>				
						</view>
						<view class="barbox">												
							<view class="tab_bar" :class="{active:tab_pu==1}" @tap="pu_type(1)">谱树</view>
							<view class="tab_bar" :class="{active:tab_pu==7}" @tap="pu_type(7)">简介</view>
							<view class="tab_bar" :class="{active:tab_pu==2}" @tap="pu_type(2)">谱文</view>
							<!-- <view class="tab_bar" :class="{active:tab_pu==3}" @tap="pu_type(3)">谱书</view> -->
							<view class="tab_bar" :class="{active:tab_pu==4}" @tap="pu_type(4)">谱图</view>
							<view class="tab_bar" :class="{active:tab_pu==5}" @tap="pu_type(5)">贡献榜</view>
							<view class="tab_bar" :class="{active:tab_pu==6}" @tap="pu_type(6)">全家福</view>
						</view>
					</view>					
				</scroll-view>				

			</view>
		</view>			
		
		<!-- 谱树 -->
		<view v-if="tab_pu==1" class="pu_tree">			
			<!-- @touchstart.stop="move"
			@touchmove.stop="moving" -->
			
			<!-- :style="{'top':positionX+'px','left':positionY+'px',transform:'scale('+scale+')'}"
			:style="{'top':positionX+'px','left':positionY+'px',transform:'scale('+scale+')'}" -->
			<view v-if="!treeData.length && identity_types>0" class="initial" @tap="toBegin()">创建初始成员</view>
			
			<!-- :style="{height: scrollheight+'px'}" -->
			<!-- scroll-y="true" -->
			<scroll-view @scroll="scrollviewchange" :scroll-into-view="scrollintoview" class="uniscrollviews" scroll-x="true" >
				<tree-item :treeData="treeData" :family_id="family_id" :tree-first="true" @openpup="openpup" />
			</scroll-view>
							
			<uni-popup ref="tree_popup" type="center" :mask-click="true" :animation="true">
				<view class="tree_popup_view">
					<image @tap="closepups" class="closeicon" :src="photo_cdn1+'zpupload/static/icon/closeicon.png'" mode=""></image>
					<view class="operation" v-if="!member_info.ismate">
						<view class="operation_title">对“{{member_info.name}}”进行结点操作</view>
						
						
						
						<!-- 活着的人，需要交钱 -->
						<view v-if="member_info.ext0==0">
							<view class="operation_btn" v-if="member_info.status==1" @tap="torefer(1)">查阅此人生平</view>
							<view class="operation_btn" v-if="member_info.status==1&&(im_msg_text || member_info.fastim_id!=0)" @tap="touuinfo(1)">添加好友</view>
							<view class="operation_btn" v-if="pu_detaile.rw_userIds == userInfo.id || userInfo.id == createUserid || userInfo.id == member_info.agent || userInfo.id == member_info.user_id" @tap="toedit(1)">编辑资料</view>
							<view   v-if="pu_detaile.rw_userIds == userInfo.id || userInfo.id == createUserid || userInfo.id == member_info.agent || userInfo.id == member_info.user_id" >
								<view class="operation_btn" @tap="addspousefun()">添加配偶</view>
								<view v-if="!member_info.parent_id" class="operation_btn" @tap="addparentsfun()">添加父辈</view>
								<view class="operation_btn" @tap="addneedfun()">添加子辈</view>	
							</view>
							<!-- <view class="operation_btn" @tap="delPeoc(member_info)">删除该人</view> -->
							<!-- <view class="operation_btn" v-if="member_info.status==0 && identity_types>0" @tap="toPayment(1)">交族谱费</view> -->
						</view>
						
						
						
						<!-- 去世的人，不用交钱 -->
						<view v-if="member_info.ext0==1">
							<view class="operation_btn" @tap="torefer(1)">查阅此人生平</view>
							<!-- <view class="operation_btn" v-if="identity_types>0" @tap="toedit(1)">编辑资料</view> -->
							<view class="operation_btn" v-if="pu_detaile.rw_userIds == userInfo.id || userInfo.id == createUserid || userInfo.id == member_info.agent" @tap="toedit(1)">编辑资料</view>
							<view v-if="pu_detaile.rw_userIds == userInfo.id || userInfo.id == createUserid || userInfo.id == member_info.agent" >
								<view class="operation_btn" @tap="addspousefun()">添加配偶</view>
								<view v-if="!member_info.parent_id" class="operation_btn" @tap="addparentsfun()">添加父辈</view>
								<view class="operation_btn" @tap="addneedfun()">添加子辈</view>	
							</view>
							<view v-if="offer_closed==0" class="operation_btn" @tap="sacrifice(1)">在线祭祀</view>
							<!-- <view class="operation_btn" @tap="delPeoc(member_info)">删除该人</view> -->
						</view>
					</view>
					
					
					
					<!-- 配偶 -->
					<view v-if="member_info.ismate" class="operation">
						<view class="operation_title">对“{{member_info.item2.name}}”进行结点操作</view>
						
						<!-- 在世 -->
						<view v-if="member_info.item2.ext0==0">							
							<view class="operation_btn" v-if="member_info.item2.status==1" @tap="torefer(2)">查阅此人生平</view>
							<view class="operation_btn" v-if="member_info.item2.status==1 && (im_msg_text || member_info.item2.fastim_id!=0)" @tap="touuinfo(2)">添加好友</view>
							<view class="operation_btn" v-if="pu_detaile.rw_userIds == userInfo.id || userInfo.id == createUserid || userInfo.id == member_info.agent || userInfo.id == member_info.user_id" @tap="toedit(2)">编辑资料</view>
							<!-- <view class="operation_btn" v-if="member_info.item2.status==0 && identity_types>0" @tap="toPayment(2)">交族谱费</view> -->
							<!-- <view class="operation_btn" @tap="delPeoc(member_info)">删除该人</view> -->
						</view>
						
						<!-- 去世 -->
						<view v-if="member_info.item2.ext0==1">
							<view class="operation_btn" @tap="torefer(2)">查阅此人生平</view>
							<view class="operation_btn" v-if="pu_detaile.rw_userIds == userInfo.id || userInfo.id == createUserid || userInfo.id == member_info.agent" @tap="toedit(2)">编辑资料</view>
							<view v-if="offer_closed==0" class="operation_btn" @tap="sacrifice(2)">在线祭祀</view>
							<!-- <view class="operation_btn" @tap="delPeoc(member_info)">删除该人</view> -->
						</view>
					</view>
					
				</view>	
			</uni-popup>	
		</view>
		
		<!-- 谱文 -->
		<view v-if="tab_pu==2" class="pu_article" :style="{height: scrollheight+'px'}">			
			<collpanelist @is_edit="is_edit" :list="list" :family_id='family_id'></collpanelist>
			<view class="create_article" v-if="pu_detaile.rw_userIds == userInfo.id || userInfo.id == createUserid || userInfo.id == member_info.agent"  >
				<view class="create_btn" @tap="toCreatewen()">新建谱文</view>
			</view>
			<empty v-if="list.length==0"></empty>
		</view>
					
		<!-- 谱书 -->
		<view v-if="tab_pu==3" class="pu_book" :style="{height: scrollheight+'px'}">
			<view class="pu_book_list">
				<view v-for="(item,index) in booksList" :key="index" hover-class="none" class="zupus_item flex ali-c">
					<view class="itemimgss">
						<image class="zpimgs" :style="{backgroundImage:'url('+photo_cdn1+'zpupload/20230905/98b7c66a675b25b9b8.png)'}" ></image>
						<view class="family_name">{{item.title}}</view>
					</view>
					<view class="zupus_item_info flex1">
						<view class="zupu_names">{{item.title}}</view>
						<view class="flex ali-c jus-b fqr_text">
							<view class="">编者： {{item.upload_name}}</view>							
						</view>
						
						<view class="rprs_text">堂号：{{item.hall_number}}</view>
						<view class="create_time">版式：{{item.format_id | format_name}}</view>
						
						<view class="read_book" @tap="toReading(item)">阅读谱书</view>
					</view>
				</view>
			</view>
			
			<view class="create_pubook" @tap="toSet"   v-if="pu_detaile.rw_userIds == userInfo.id || userInfo.id == createUserid || userInfo.id == member_info.agent" >
				<view class="pubook_btn">新建谱书</view>
			</view>
			
			<empty v-if="booksList.length==0"></empty>
		</view>
		
		<!-- 谱图 -->
		<view v-if="tab_pu==4" class="show_pu">
			<scroll-view class="uniscrollviews" :scroll-left="scrollleftshowtree" :scroll-into-view="putuscrollintoview" scroll-x="true" scroll-y="true">
					
				<!-- <view
					id="treecontent"
					class="tree-content" 
					@touchstart.stop="move" 
					@touchmove.stop="moving"
					:style="{transform:'scale('+scale+')'}"
					/>	 -->
				<view v-if="!iswait" class="pu_wait">数据加载中，请耐心等待~</view>	
				<showtree id="showtreemain" :showData="showData" :family_id="family_id" :tree-first="true" />
			</scroll-view>
		</view>
		
		<!-- 贡献榜 -->
		<view v-if="tab_pu==5" class="devote">
			<view v-if="friend_list.length == 0" class="devote_hum" style="display: flex;justify-content: center;">
				<view  style="display: flex; align-items:center;">
					<view class="hum_text">暂无贡献记录</view>
				</view>
			</view>
			<view v-else class="devote_hum" v-for="(item,index) in friend_list" @tap="toCall(item)" style="display: flex;justify-content: space-between;"> 	
				<view style="display: flex; align-items:center;">
					<image v-if="item.avatar" class="hum_img" :src=" item.avatar ? photo_cdn1+ item.avatar :  photo_cdn1+ 'zpupload/userinfo/1.png' "></image>
					<image v-else class="hum_img" :src="photo_cdn1+'zpupload/static/user/normal.png'"></image>
					<view class="hum_text">{{item.name}}</view>
				</view>		
				<view  style="display: flex; align-items:center;">
					<view class="hum_text">贡献金额:{{item.price_count.toFixed(2)}}</view>
					<image style="width: 60rpx;height: 60rpx;border-radius: 50%;" :src="photo_cdn1+'zpupload/static/img/reward-icon.gif'"></image>
				</view>
			</view>
		</view>
		
		<!-- 全家福 -->
		<view v-if="tab_pu==6" class="familyportraits">			
			<view class="familyportraits_list flex  jus-b flex-wrap">
				<navigator :url="'/pages/zupu/qjfinfo/qjfinfo?photo_wall_id='+item.id" class="familyportraits_item" v-for="(item,index) in portraits_listdata" :key="index">
					<image class="familyportraits_img" :src="photo_cdn1+item.one_pic" mode="aspectFill"></image>
					<view class="familyportraits_footer">
						<view class="familyportraits_title twoline">{{item.title}}</view>
					</view>
				</navigator>
				
				<view class="emptytag">
					<empty v-if="portraits_listdata.length==0"></empty>
				</view>
			</view>
			
			<view class="sends_push_qjf_main flex jus-e"  v-if="pu_detaile.rw_userIds == userInfo.id || userInfo.id == createUserid || userInfo.id == member_info.agent"  >
				<navigator :url="'/pages/zupu/sendspushqjf/sendspushqjf?family_id='+family_id" class="sends_push_qjf_ntns">发布全家福</navigator>
			</view>
		</view>
		
		<!-- 族谱简介: -->
		<view v-if="tab_pu==7" class="ancestraltraining">
			<view class="profile">
				<view class="profile_title">{{pu_info.surname_text}}{{pu_info.type | format_pu_type}}</view>
				<view class="profile_addr">{{pu_info.addr ||''}}</view>
				<view class="profile_hum">
					<image v-if="pu_info.avatar" class="hum_avtar" :src="pu_info.avatar"></image>
					<image v-if="pu_info.shaikh_name&&!pu_info.avatar" class="hum_avtar" :src="photo_cdn1+'zpupload/static/tablet/boy_alive.png'"></image>
					<view v-if="pu_info.shaikh_name" class="hum_name" @tap="contactInheritorn(pu_info.shaikh_info.im_id)">{{pu_info.shaikh_info.realname || ''}}</view>
					<view v-if="pu_info.shaikh_name" class="hum_name_m">（管理员）</view>
				</view>
				<view class="profile_hum" v-for="(item,index) in pu_info.inheritor">
					<image v-if="item.avatar" class="hum_avtar" :src="item.avatar"></image>
					<image v-else class="hum_avtar" :src="photo_cdn1+'zpupload/static/tablet/boy_alive.png'"></image>
					<view class="hum_name" @tap="contactInheritorn(item.im_id)">{{item.realname || ''}}</view>
					<view class="hum_name_m">（传承人）</view>
				</view>
				<view class="profile_hum"></view>
			</view>
			<view v-if="pu_info.family_regulation" class="ancestraltraining_text">{{pu_info.family_regulation}}</view>
			<empty v-else="portraits_listdata.length==0"></empty>
			 
	
		
		
			<view  style="width: 100%; display: flex;" v-if="userinfodata.id == pu_info.create_user_id">
				<view style="display: flex; justify-content: space-between; width: 100%;" >
					<button size="default" type="primary"@tap="editzupufun(pu_info)" >修改家谱 </button>
					<button size="default" type="warn" @tap="delfunc()" v-if="pu_info.type == '1'">删除家谱 </button>
				</view>
			</view>
			
		</view>
		
		
		<xkyguidestep :step="step" ref="xkyguidestep"></xkyguidestep>

	</view>
</template>

<script>
	import {
		mapState,
		mapActions,
		mapMutations
	} from "vuex"
	import treeItem from '@/components/tree-item/tree-item.vue';
	import showtree from '@/components/showtree/showtree.vue';
	import collpanelist from '@/components/collpanelist/collpanelist.vue';
	import {getDevoteByList} from "@/utils/api/user.js"
	import {worshipHallInfo,familyInfo,familyTreeList,familyTreeView,getArticleList,getBookList,familyList,getPhotoList,getFamilyDetail,updateFamily,updateFamilyPeople} from "@/utils/api/zupu.js";
	import {getUserinfo} from "@/utils/api/api.js";
	import config from "@/utils/config.js";
	let {staticurl,photo_cdn1} = config.baseUrl;
	
	import {upgrade} from "@/utils/api/api.js";
	import xkyguidestep from "@/components/xkyguidestep/xkyguidestep.vue";
	export default {
		components:{
			treeItem,
			showtree,
			collpanelist,
			xkyguidestep
		},
		filters:{
			format_name(val){
				if(Number(val)==1){
					return "欧式"
				}
				if(Number(val)==2){
					return "牒记式"
				}
				if(Number(val)==3){
					return "苏式"
				}
			}
		},
		data() {
			return {
				pu_detaile:"",//族谱详情信息
				identity_types:0,//0 普通用户  1 读写权限人  2 创建人
				info_zupu_data:{},//族谱基本信息
				scrollleftshowtree:0,//树图
				scrollintoview:"",//滑动到指定位置
				putuscrollintoview:"",//谱图滑动到指定位置
				staticurl,
				photo_cdn1,
				tab_pu:1,
				is_add_father:false,
				family_id:'',
				family_name:'',				
				distance: 0,//手指移动的距离
				scale: 1,//0.33,//0.33,//1,//页面的比例
				disX:0,
				disY:0,
				positionX:0,
				positionY:0,
				updata:true,
				member_info:{},
				userInfo: {},
				userinfodata:null,
				pu_info:{},//谱的所有信息
				scrollheight:'',
				windowHeight:'',
				windowWidth:0,
				scrollLeft:0,//滑动距离
				
				view_width:0,
				wiew_height:0,
				offer_closed:1,//1关闭 0开启
				
				page:0,
				list:[],//谱文列表
				iswait:false,//谱图加载状态
				
				booksList:[],//谱书列表
				keywords:'',//搜索关键词	
				imid:'',//im系统用户id
				
				info:{},//im 信息
				showData:[],//吊谱
				people_id:'',//搜索返回的结果
				friend_list:[],//贡献列表
				
				portraits_listdata:[],//全家福数据列表
				im_msg_text:'',//提醒文字
				step:{
					name:'workbenchKey',
					guideList: [
						{
							el: '.select.active', 
							tips: '你要的结果在这~', 
							style: "border-radius: 8rpx;margin: 0",
							next:"好的"
						},]
				},
				createUserid:null,
				code:''
				
			};
		},
		computed: mapState({
			treeData: state => state.treedata.treeData,
			showpup:state=>state.treedata.showpup,//弹窗状态
			openpup_params:state=>state.treedata.openpup_params,//操作弹窗数据
			item_active:state=>state.treedata.item_active,//选中的id
		}),
		watch:{
			showpup(){//检讨弹窗状态
				// console.info("showpup",this.showpup);
				if(this.showpup){
					this.updateTreedataItem({val:false,key:'showpup'});
					this.openpup(this.openpup_params);//弹窗
				}
			},
			//设置自动滑动
			item_active(){
				this.$nextTick(()=>{
					if(this.keywords){//搜索的时候
						setTimeout(()=>{
							console.info("自动滑动！");
							this.scrollintoview = 'people_border' + this.item_active
							setTimeout(()=>{
								this.scrollintoview = "";//清除一下
							},5000)
							
							// this.$refs.xkyguidestep.getinit();//提示引导
						},500)
					}
					
				})
			}
		},
		onReady(){
			this.computeheight()
		},
		onLoad(option) {
			this.family_id = Number(option.family_id);
			this.tab_pu = option.tab_pu?option.tab_pu:1;
			this.imid = option.imid?option.imid:'';
			this.code = option.code?option.code:'';
			// this.$nextTick(()=>{
			// 	this.detectionexceed();
			// })
			this.familyTreeListfunone();
			this.getUserinfofun();
			this.upgradefun();
			setTimeout(()=>{
				this.ws.pageFun(this.pageDataLoad, this);
			},500)
								
		},
		onShow(){
			this.people_id = uni.getStorageSync('people_id')
			if(this.people_id&&this.people_id!=0){
				this.familyTreeListfunone(1);				
			}
			// this.treeData;
			console.log(this.treeData)
		},
		//关闭页面清除数据
		onUnload() {
			this.updateTreedataItem({val:[],key:'treeData'});
			this.updateTreedataItem({val:"",key:'item_active'});
			this.updateTreedataItem({val:0,key:'tree_scrolltop'});
			uni.removeStorageSync('people_id')
		},
		//监听滚动
		onPageScroll({
			scrollTop
		}) {
			if(scrollTop>120){
				this.updateTreedataItem({val:scrollTop*2.3,key:'tree_scrolltop'});
			}else{
				this.updateTreedataItem({val:scrollTop*3.5,key:'tree_scrolltop'});
			}
		},
		//下拉刷新
		onPullDownRefresh() {
			this.keywords = '';
			this.familyTreeListfunone();
			this.people_id = '';
			setTimeout(()=>{
				uni.stopPullDownRefresh(); //结束下拉刷新
			},1500)
		},
		methods:{
			//删除家族族谱族人
			delPeoc(e){
				uni.showModal({
					title: '是否确认删除该族人',
					content: '一旦删除将不可恢复',
					success: function (res) {
						if (res.confirm) {
							console.log('用户点击删除')
							e.status = '0';
							//修改家族成员
							updateFamilyPeople(e).then(res=>{
								console.log(res)
								
								if(res.code == 1){
									
								}
							})
							
							this.$nextTick(()=>{
							        this.familyTreeListfunone();
							        this.$refs.tree_popup.close();
							})
							
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
				
			},
			//修改族谱
			editzupufun(item){
				uni.navigateTo({
					url:`/pages/zupu/createzupu/createzupu?id=${item.id}`
				})
			},
			//删除家谱
			delfunc(){
				let that = this;
				uni.showModal({
					title: '是否确认删除家谱',
					content: '一旦删除家谱将不可恢复',
					success: function (res) {
						if (res.confirm) {
							that.pu_info.status = 0;
							that.pu_info.del_flag = 1;
							 updateFamily(that.pu_info);
							 uni.switchTab({
							 	url: '/pages/index/index'
							 });
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			...mapActions(['familyTreeListfun','ModifyItemData','ModifyItemDataTop','set_tree_show','showTree']),
			...mapMutations(['updateTreedataItem']),
			scrollviewchange(e){
				// console.info("e scrollviewchange",e);
				if(e.detail.scrollTop>20){
					this.updateTreedataItem({val:e.detail.scrollTop*2.3,key:'tree_scrolltop'});
				}
				
			},
			pageDataLoad: function (refresh = false) {
				var that = this
				if(that.imid ){
					this.ws.send({
						c: 'User',
						a: 'infoDetail',
						data: {
							'method': 'get',
							'type': 'user',
							'id': that.imid,
							'requestor': that.userinfo.id,
							'refresh': refresh,
							'notitle':'none'
						}
					})
				}
				
			},
			upgradefun(){
				upgrade({
					
				}).then((res)=>{
					if(res.code==1){
						this.offer_closed = res.data.offer_closed;
						// this.offer_closed = 0;
						// #ifdef MP-WEIXIN
						this.offer_closed = 0;
						// #endif
						this.im_msg_text = res.data.im_msg_text;
					}
				})
			},
			//切换tab
			pu_type(indexs){
				if(this.tab_pu==indexs){
					return false
				}
				this.tab_pu = indexs;
				uni.pageScrollTo({
					scrollTop:0,
					duration: 0
				})
				if(indexs==1){
					this.scrollLeft = 0;
				}else{
					this.scrollLeft = (indexs+0)*16;
				}
				switch(indexs)
				{
					case 2:
						this.list = [];
						this.page = 0;
						this.getArticleListfun();
						break;
					case 3:
						this.getBookListfun();
						break;
					case 4:
						this.familyTreeViewfun();
						break;
					case 5:
					// 贡献榜
					this.getDevoteByListfun();
						break;
					case 6:
						this.getPhotoListfun();//全家福
						break;
					case 7://简介:
						this.familyInfofun();
						break;
				}
			},
			toggle(){
				uni.redirectTo({
					url:'/pages/zupu/myzupu/myzupu'
				})
			},
			// 获取树状图数据
			familyTreeListfunone(text){
				let init_one = 1;
				if(text==1){
					init_one = ''
				}
				console.log(init_one,'init_one')
				this.familyTreeListfun({
					family_id:this.family_id,
					init_one:init_one,
					people_id:this.people_id,
					code:this.code
				}).then((res)=>{
					console.log(res)
					this.$nextTick(()=>{
						if(this.item_active){
							setTimeout(()=>{
								console.info("自动滑动！",this.item_active);
								this.scrollintoview = 'people_border' + this.item_active
								this.people_id = "";
								uni.removeStorageSync('people_id')
								setTimeout(()=>{
									this.scrollintoview = "";//清除一下
									this.updateTreedataItem({val:"",key:'item_active'});//清掉~
									
								},5000)
								
								setTimeout(()=>{
									this.$refs.xkyguidestep.getinit();//提示引导
								},500)
								
								
							},500)
						}
						
					})
				})
			},
			//获取静态树状图
			familyTreeViewfun(){
				familyTreeView({
					family_id:this.family_id
				}).then(res=>{
					this.showData = res.data
					this.$nextTick(()=>{
						if(res.data[0]){
							this.iswait = true;
							console.log(this.iswait)
							// setTimeout(()=>{
							// 	console.info("自动滑动！");
							// 	this.putuscrollintoview = 'showtree12739'; //'showtree'+ res.data[0].id;
							// 	console.info('showtree'+ res.data[0].id);
							// 	setTimeout(()=>{
							// 		this.putuscrollintoview = "";//清除一下
							// 	},5000)
							// },500)
							console.info("自动滑动！");
							let obj = uni.createSelectorQuery().select('#showtree'+res.data[0].id)
							obj.boundingClientRect( (data)=> { // data - 各种参数
							    let Sysinfo = uni.getSystemInfoSync();
							 //    console.log("得到布局位置信息" + JSON.stringify(data));
							 //    console.log("节点离页面顶部的距离为" + data.top);
							 //    console.info('Sysinfo',Sysinfo);
								   this.scrollleftshowtree = (data.width/2 )- (Sysinfo.windowWidth/2);
								// this.$refs.xkyguidestep.getinit();//提示引导
								// data.width/2
							}).exec()
						}
						// this.iswait = false;
						// console.log(this.iswait)
					})
				})
			},
			// 双指触发开始计算出发时两个手指的坐标距离
			// touchstartCallback(e) {
			// 	// 单手指缩放开始，不做任何处理
			// 	if (e.touches.length == 1) return;
			// 	// 当两根手指放上去的时候，将距离(distance)初始化。
			// 	let xMove = e.touches[1].clientX - e.touches[0].clientX;
			// 	let yMove = e.touches[1].clientY - e.touches[0].clientY;
			// 	//计算开始触发两个手指坐标的距离
			// 	this.distance = Math.sqrt(xMove * xMove + yMove * yMove);
			// },
			// 双指移动计算两个手指的坐标距离
			// touchmoveCallback(e) {
			//     // 单手指缩放不做任何操作
			//     if (e.touches.length == 1) return;
			//     //双手指运动 x移动后的坐标和y移动后的坐标
			//     let xMove = e.touches[1].clientX - e.touches[0].clientX;
			//     let yMove = e.touches[1].clientY - e.touches[0].clientY;
			//     //双手指运动新的 ditance
			//     let distance = Math.sqrt(xMove * xMove + yMove * yMove);
			//     //计算移动的过程中实际移动了多少的距离
			//     let distanceDiff = distance - this.distance;
			//     let newScale = this.scale + 0.0001 * distanceDiff
			// 	this.scale = newScale
			//     // 为了防止缩放得太大，所以scale需要限制，同理最小值也是
			//     if (newScale >= 5) {
			//       newScale = 5
			// 	  this.distance = distance
			// 	  this.scale = newScale
			//     }
			//     //为了防止缩放得太小，所以scale需要限制
			//     if (newScale <= 0.1) {
			//       newScale = 0.1
			// 	  this.distance = distance
			// 	  this.scale = newScale
			//     }
			// },
			// 拖拽移动
			// move(e) {
			// 	// console.info('e拖拽移动',e);
			// 	 const odiv = e.currentTarget // 获取元素
			// 	 // 算出鼠标相对元素的位置
			// 	 if(e.touches.length == 2){
			// 		 return this.touchstartCallback(e);
			// 	 }else{
			// 		 return ;
			// 	 }
			// 	 this.disX = e.touches[0].clientX - odiv.offsetLeft
			// 	 this.disY = e.touches[0].clientY - odiv.offsetTop
				 
				 
			// 	 let view = uni.createSelectorQuery().select("#treecontent");
			// 	 view.boundingClientRect((data)=> {
			// 	 	//获取固定尾部的高度=data.height
			// 	 	// that.style.footViewHeight = data.height
			// 	 	// console.info(" data.height", data);
					
			// 		this.view_width = data.width;
			// 		this.wiew_height = data.height;
					
			// 	 }).exec();
			// },
			// 移动中
			// moving(e){
			// 	// console.info('e移动中--',e,this.scale);
			// 	if(e.touches.length == 2) {
			// 		return this.touchmoveCallback(e);
			// 	}else{
			// 		return ;
			// 	}
			// 	// 用鼠标的位置减去鼠标相对元素的位置，得到元素的位置
			// 	let left = e.touches[0].clientX - this.disX
			// 	let top = e.touches[0].clientY - this.disY
			// 	// 绑定元素位置到positionX和positionY上面
			// 	let scale = this.scale;
			// 	let view_width = this.view_width*scale;
			// 	let wiew_height = this.wiew_height*scale;
			// 	this.positionX = top
			// 	this.positionY = left
			// 	if(scale<1){//缩小了
			// 		// dbleft = left + this.view_width + (this.view_width  * (1+scale))
			// 		let dbleft = left +  (this.view_width  * (1+scale));
			// 		let rdbright  = left + view_width;
			// 		let wiew_height1 = wiew_height+(this.wiew_height  * (1+scale))
			// 		let wiew_height2 = wiew_height-wiew_height-(this.wiew_height  * (1+scale))
			// 		//左禁止超出
			// 		if(dbleft<= (0-view_width) ){//左右显示移动超出限制
			// 			// console.info("左禁止超出",dbleft,(0-view_width));
			// 			return false;
			// 		}
			// 		// 右禁止超出
			// 		if(rdbright>=(view_width)){
			// 			// console.info("右禁止超出99",rdbright,(view_width));
			// 			return false;
			// 		}
			// 		//上禁止超出
			// 		if((0-top)>= (wiew_height1) ){
			// 			// console.info("上禁止超出");
			// 			return false;
			// 		}
			// 		//下禁止超出
			// 		console.info("top1",top,wiew_height,(wiew_height2));
			// 		if((0-top)<=(wiew_height2)){
			// 			// console.info("下禁止超出");
			// 			return false;
			// 		}
			// 	}else{
			// 		//没有缩放
			// 		if(left>=(view_width/3) ||  left<= (0-view_width+200) ){//左右显示移动超出限制
			// 			// console.info("超出禁止3");
			// 			return false;
			// 		}
			// 		if(top>=(wiew_height/2 ) || top<=(0-wiew_height+300) ){
			// 			// console.info("超出禁止4");
			// 			return false;
			// 		}
			// 	}
			// 	this.positionX = top
			// 	this.positionY = left
			// },
			//弹窗
			openpup(item) {	
				this.updateTreedataItem({val:item.subscript,key:'sel_subscript'});//保存操作数据的下标
				this.member_info = item;			
				console.log(this.member_info,'member_info')
				this.$store.dispatch("add_father",{id:this.member_info.id}).then((success)=>{
					this.is_add_father = false;
					this.$refs.tree_popup.open();
				}).catch((err)=>{
					this.is_add_father = true;
					this.$refs.tree_popup.open();
				})
			},
			//关闭弹窗
			closepups(){
				this.$refs.tree_popup.close();
			},
			//计算高度
			computeheight(){
				let resinfo = uni.getSystemInfoSync();				
				this.windowHeight = resinfo.windowHeight;
				this.windowWidth = resinfo.windowWidth;
				let query = uni.createSelectorQuery().select(".tree_tab");
				query.boundingClientRect((data)=> {
					let scrollheight = this.windowHeight - data.height;
					this.scrollheight = scrollheight;
				}).exec();
				
			},
			//检测是否超出范围 超出了要调整
			// detectionexceed(){
			// 	// console.info("检测是否超出范围");
			// 	let view = uni.createSelectorQuery().select("#treecontent");
			// 	view.boundingClientRect((data)=> {
			// 		//获取固定尾部的高度=data.height
			// 		// that.style.footViewHeight = data.height
			// 		// console.info(" data.height", data);
			// 		this.view_width = data.width;
			// 		this.wiew_height = data.height;
			// 	}).exec();
			// },
			//添加子辈
			addneedfun(){
				
				this.updateTreedataItem({val:this.member_info,key:'tap_more_item'});//保存当前操作的数据信息
				
				this.$refs.tree_popup.close();
				let level = this.member_info.item_level?this.member_info.item_level:"";//加爸爸都是1
				if(level){
					level = parseInt(level)+1
				}
				uni.navigateTo({
					url:`/pages/zupu/createnode/createnode?family_id=${this.family_id}&parent_id=${this.member_info.id}&source=3&operate_name=${this.member_info.name}&family_tree_id=${this.member_info.id}&people_id=${this.member_info.people_id}&surname=${this.pu_detaile.family_name}&level=${level}&pu_type=${this.pu_detaile.type}`
				})
			},
			//添加配偶
			addspousefun(){
				this.updateTreedataItem({val:this.member_info,key:'tap_more_item'});//保存当前操作的数据信息
				
				this.$refs.tree_popup.close();
				uni.navigateTo({
					url:`/pages/zupu/createnode/createnode?family_id=${this.family_id}&family_tree_id=${this.member_info.id}&source=1&operate_name=${this.member_info.name}&people_id=${this.member_info.people_id}&pu_type=${this.pu_detaile.type}`
				})
			},
			//添加父辈
			addparentsfun(){
				this.updateTreedataItem({val:this.member_info,key:'tap_more_item'});//保存当前操作的数据信息
				
				this.$refs.tree_popup.close();
				let level = this.member_info.item_level?this.member_info.item_level:1;//加爸爸都是1
				uni.navigateTo({
					url:`/pages/zupu/createnode/createnode?family_id=${this.family_id}&source=2&operate_name=${this.member_info.name}&child_id=${this.member_info.id}&family_tree_id=${this.member_info.id}&people_id=${this.member_info.people_id}&surname=${this.pu_detaile.family_name}&level=${level}&pu_type=${this.pu_detaile.type}`
				})
			},
			//查阅生平
			torefer(type){
				let linkurl = "";
				if(type==1){//1 本人  2配偶
					linkurl = `/pages/zupu/viewlifehistory/viewlifehistory?people_id=${this.member_info.people_id}&operate_name=${this.member_info.name}&family_id=${this.family_id}&family_tree_id=${this.member_info.id}&identity_types=${this.identity_types}&sex_type=1`
				}else if(type==2){
					linkurl = `/pages/zupu/viewlifehistory/viewlifehistory?people_id=${this.member_info.item2.people_id}&operate_name=${this.member_info.item2.name}&family_id=${this.family_id}&family_tree_id=${this.member_info.id}&identity_types=${this.identity_types}&sex_type=2`
				}
				this.$refs.tree_popup.close();
				uni.navigateTo({
					url:linkurl,
				})
			},
			//查看联系人
			touuinfo(type){
				let fastim_id = "";
				if(type==1){					
					fastim_id = this.member_info.fastim_id;
					if(fastim_id==0){
						this.$showModal({
							title:'温馨提示',
							concent:this.im_msg_text,							
							confirmVal:'已知晓',
							delCancel:true,
							cancelVal:'取消',
						}).then(res=>{
							
						}).catch(res=>{
							
						})
						return false;
					}
				}else if(type==2){
					fastim_id = this.member_info.item2.fastim_id;
					if(fastim_id==0){
						this.$showModal({
							title:'温馨提示',
							concent:this.im_msg_text,							
							confirmVal:'已知晓',
							delCancel:true,
							cancelVal:'取消',
						}).then(res=>{
							
						}).catch(res=>{
							
						})
						return false;
					}
					
				}
				uni.navigateTo({
					url:`/pagesim/center/info?id=${fastim_id}`
				})
				this.$refs.tree_popup.close();
			},
			//编辑资料
			toedit(type){
				this.updateTreedataItem({val:this.member_info,key:'tap_more_item'});//保存当前操作的数据信息
				
				let linkurl = "";
				if(type==1){//1 本人  2配偶
					linkurl = `/pages/zupu/viewlifehistory/viewlifehistory?people_id=${this.member_info.people_id}&operate_name=${this.member_info.name}&family_id=${this.family_id}&family_tree_id=${this.member_info.id}&identity_types=${this.identity_types}&sex_type=1&edit=1`
				}else if(type==2){
					linkurl = `/pages/zupu/viewlifehistory/viewlifehistory?people_id=${this.member_info.item2.people_id}&operate_name=${this.member_info.item2.name}&family_id=${this.family_id}&family_tree_id=${this.member_info.id}&identity_types=${this.identity_types}&sex_type=2&edit=1`
				}
				this.$refs.tree_popup.close();
				uni.navigateTo({
					url:linkurl,
				})
			},
			//初始化成员
			toBegin(){
				this.$refs.tree_popup.close();
				uni.navigateTo({
					url:`/pages/zupu/createnode/createnode?family_id=${this.family_id}&source=4&pu_type=${this.pu_detaile.type}`
				})
			},
			//在线祭祀
			sacrifice(type){
				this.$refs.tree_popup.close();
				let sacriurl = "";//去祭祀
				let hallurl = "";//去创建灵堂
				let people_id = '';
				let member_name = '';
				if(type==1){
					people_id = this.member_info.people_id
					member_name = this.member_info.name
					sacriurl = `/pages/zupu/sacrifice/sacrifice?people_id=${this.member_info.people_id}`
					hallurl = `/pages/zupu/create_mourning/create_mourning?people_id=${this.member_info.people_id}`
				}else if(type==2){
					people_id = this.member_info.item2.people_id
					member_name = this.member_info.item2.name
					sacriurl = `/pages/zupu/sacrifice/sacrifice?people_id=${this.member_info.item2.people_id}`
					hallurl = `/pages/zupu/create_mourning/create_mourning?people_id=${this.member_info.item2.people_id}`
				}
				worshipHallInfo({
					people_id:people_id
				}).then((res)=>{
					if(res.code==1){
						uni.navigateTo({
							url:sacriurl
						})
					}
					if(res.code==0){
						if(this.identity_types==0){
							this.$api.msg(`${member_name}暂时还未创建灵堂`)
							return false;
						}
						this.$showModal({
							title:'提示',
							concent:`${member_name}还未创建灵堂，是否去创建？`,
							confirmVal:'确定',
							cancelVal:'取消',
						}).then(res=>{
							// if(this.userInfo.is_shaikh==0){
							// 	this.$api.msg("您暂时没有创建灵堂的权限！")
							// }else if(this.userInfo.is_shaikh==1){
								uni.navigateTo({
									url:hallurl
								})
							// }
						}).catch(err=>{
							console.log(err)
						})
					}
					if(res.code==-1){
						this.$api.msg(res.msg);
					}
				})
			},
			//获取用户信息和身份信息
			async getUserinfofun() {
				//获取用户信息
				let res = await getUserinfo({})
				this.userInfo = res.data.userinfo;
				this.userinfodata = res.data.userinfo;
				console.log("用户金额")
				console.log(this.userInfo)
				let myuserid = res.data.userinfo.id;
				//获取族谱信息
				let restwo = await getFamilyDetail({
					family_id: Number(this.family_id)
				})
				if (restwo.code == 1) {
					this.pu_detaile = restwo.data.info;
					// identity_types
					let rw_user_id = restwo.data.info.rw_user_id;//读写权限人
					let create_user_id = restwo.data.info.create_user_id;//创建人
					this.createUserid = restwo.data.info.create_user_id;
					if(create_user_id==myuserid && myuserid){
						this.identity_types = 2;//创建人
					}else if(rw_user_id){
						
						if(restwo.data.info.rw_userIds != null){
							console.log("读写权限人")
							this.identity_types = 1;//读写权限人
						}
						
						// if(rw_user_id.indexOf(String(myuserid))!=-1 || rw_user_id.indexOf(parseInt(myuserid))!=-1){
							
						// }
					}
					
					if(restwo.data.type!=2){
						//家谱 都可以操作
						this.identity_types = 1;//读写权限人
					}
				}
			},
			//去交钱
			toPayment(data){
				this.$refs.tree_popup.close();
				let number = '';
				let family_tree_id = ''
				if(data==1){
					number = this.member_info.number;
					family_tree_id = this.member_info.id;
				}else if(data==2){
					number = this.member_info.item2.number;
					family_tree_id = this.member_info.id;
				}
				uni.navigateBack();
			},
			
			//谱文相关
			toCreatewen(){
				uni.navigateTo({
					url:`/pages/zupu/puwen/create_puwen/create_puwen?family_id=${this.family_id}`
				})
			},
			//获取谱文
			getArticleListfun(){
				this.page++
				getArticleList({
					family_id:this.family_id,
					page:this.page
				}).then(res=>{
					if(res.code==1){
						this.list = [...this.list,...res.data.list]
						for(var i=0;i<this.list.length;i++){
							for(var j=0;j<this.list[i].article_list.length;j++){
								this.list[i].article_list[j].edited = 1;
							}
						}
					}
				})
			},
			async is_edit(data){
				console.log(data,'data')
				if(this.list[data.index].article_list[data.indexs].edited == 1){
					this.list[data.index].article_list[data.indexs].edited = 2;
				}else{
					this.list[data.index].article_list[data.indexs].edited = 1;
				}				
			},
			//去新建谱书
			toSet(){
				uni.navigateTo({
					url:`/pages/zupu/pu_book/book_create/book_create?family_id=${this.family_id}`
				})
			},
			//获取谱书列表
			getBookListfun(){
				getBookList({
					family_id:this.family_id
				}).then(res=>{
					if(res.code==1){
						this.booksList = res.data.list;
					}
				})
			},
			//去预览
			toReading(item){
				uni.navigateTo({
					url:`/pages/zupu/pu_book/look_book/look_book?book_id=${item.id}`
				})
			},
			
			//去搜索
			toChoice(){
				this.tab_pu = 1;
				uni.navigateTo({
					url:`/pages/zupu/choice_hum/choice_hum?family_id=${this.family_id}`
				})
			},
			//联系传承人
			contactInheritorn(e){
				uni.navigateTo({
					url:`/pagesim/center/info?id=${e}&type=user`
				})
			},
			//获取贡献榜
			getDevoteByListfun(){
				getDevoteByList({
					family_id:this.family_id
				}).then(res=>{
					if(res.code==1){
						this.friend_list = []
						if(res.data.list.length > 0 ){
							this.friend_list = res.data.list;
						}
					}
				})
			},
			//加好友
			toCall(item){
				uni.navigateTo({
					url:`/pagesim/center/info?id=${item.im_id}`
				})
			},
			//获取全家福
			getPhotoListfun(){
				getPhotoList({
					family_id:this.family_id,
					pages:1,
				}).then((res)=>{
					if(res.data){
						let listdata = res.data.list;
						listdata = listdata.map((item,index)=>{
							item.pics_arr = item.pics.split(",");
							if(item.pics_arr.length){
								item.one_pic = item.pics_arr[0];
							}
							return item;
						})
						this.portraits_listdata = listdata;
					}
					
				})
			},
			//查询族谱基本信息
			familyInfofun() {
				familyInfo({
					id: Number(this.family_id)
				}).then((res) => {
					if (res.code == 1) {
						console.log("!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!")
						this.pu_info = res.data;
						console.log(res.data)
					} else {
			
					}
				})
				
				this.getUserinfofun();
			},
		}
	}
</script>

<style lang="scss">
	@import "./familytrees.scss"
</style>